import React from 'react';
import { Route } from 'react-router-dom'
import './tools.css'
import QrGenerator from './qr-generator.js'
import QrGenerator2 from './qr-generator2.js'

import LeftNavigator from '../widget/left-navigator.js'
import Template from './template.js'

class Tools extends React.Component {
  constructor(props) {
    super(props);

    this.routerConfig = [
      {
        path: this.props.match.url + '/qr_generator',
        name: '授权地址生成'

      },
      {
        path: this.props.match.url + '/qr_generator2',
        name: '三方授权地址生成'

      },
      {
        path: this.props.match.url + '/template',
        name: '开发模板'
      }
    ]

  }

  componentDidMount = () => { }

  render() {
    return (
      <div>
        {/* 导航组件 */}
        <LeftNavigator routerConfig={this.routerConfig} /> {/* 右边详情 */}
        <div className="left-container">
          <Route exact path={`${this.props.match.url}/`} component={QrGenerator} />
          <Route path={`${this.props.match.url}/qr_generator`} component={QrGenerator} />
          <Route path={`${this.props.match.url}/qr_generator2`} component={QrGenerator2} />
          <Route path={`${this.props.match.url}/template`} component={Template} />
        </div>

      </div>
    )
  }
}
export default Tools;